<template>
  <div class="login">
<!--    <div class="header">
      <div class="img">
        <img src="../assets/logo.576ae1f6.png" alt="" />
      </div>
    </div>-->
    <header data-v-ed39777a="" class="el-header" style="height: 88px;">
      <img data-v-ed39777a="" src="../assets/logo.576ae1f6.png" alt="">
      <h1 data-v-ed39777a="" style="display: none;">领云教务</h1>
    </header>
    <div class="main">
      <div class="main-left">
        <img src="../assets/login.9d61d4c0.jpg" alt="" />
      </div>
      <div class="main-right">
        <div class="register">账号登录</div>
        <div class="form">
          <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
          >
            <el-form-item el-icon-user prop="username">
              <el-input
                  type="text"
                  prefix-icon="el-icon-user"
                  placeholder="请输入账号"
                  v-model="ruleForm.username"
                  autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input
                  type="password"
                  prefix-icon="el-icon-lock"
                  placeholder="请输入密码"
                  v-model="ruleForm.pass"
                  autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  class="btn"
                  @click="submitForm('ruleForm')"
              >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">云教务系统@2021 京ICP备17033472号-4</div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        username: "",
        pass: "",
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((res) => {
        if (res) {
          //vue axios 发起网络请求
          this.axios.post("http://www.eshareedu.cn/edusystems/api/admin/checklogin", this.ruleForm).then((res) => {
            if (res.data.errCode == "10000") {
              // console.log(res.data.data.token);
              window.sessionStorage.setItem("access_token", res.data.data.token);
              this.$message.success("登录成功");
              this.$router.push("/home");
            }
          });
        } else {
          this.$message.error('用户名或密码错误，登录失败');
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
/*.header {
  height: 100px;
  background-color: #fff;
}
.header img {
  margin: 24px 30px;
}*/
 .login .el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
}
.el-header {
  box-sizing: border-box;
  flex-shrink: 0;
}
.login .el-footer img, .login .el-header img {
  width: auto;
  height: 46px;
}
img {
  border: none;
}



.main {
  height: 700px;
  min-width: 700px;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .main-left {
  width: 900px;
  height: 650px;
  margin-left: 170px;
}
.main .main-left img {
  width: 100%;
  height: 100%;
}
.main .main-right {
  width: 600px;
  height: 650px;
  background-color: #fff;
  right: 0;
  margin-right: 130px;
}
.main .main-right .register {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 50px;
  font-size: 24px;
  font-weight: bold;
}
.main .main-right .form {
  width: 500px;
  margin: 0 auto;
}
.main .main-right .form .el-input {
  height: 40px;
}
.main .main-right .btn {
  width: 100%;
}

.footer {
  height: 70px;
  background-color: #fff;
  line-height: 70px;
  text-align: center;
}
</style>